473,479 Members | 2,085 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

Floating divs

My machine generated site displays navigation links (in a table td,
alas, I'll fix that someday)
at screen left, with main display in a td at screen right.

Pages with lots of navigation links force the user to scroll downward
(to see the
links at screen bottom) which sometimes pushes the main display
visually off screen .

I've experimented with javascript, using code that
floats the main display div downward as the page is scrolled, so the
main
display is always visible.

So I'm just curious: is it or would it be possible, to do the same
thing
with css somehow, rather than javascript? (probably not, I'm
guessing).
But maybe.

Apr 30 '07 #1
10 2619
On 2007-04-30, salmobytes <Sa***************@gmail.comwrote:
My machine generated site displays navigation links (in a table td,
alas, I'll fix that someday)
at screen left, with main display in a td at screen right.

Pages with lots of navigation links force the user to scroll downward
(to see the
links at screen bottom) which sometimes pushes the main display
visually off screen .

I've experimented with javascript, using code that
floats the main display div downward as the page is scrolled, so the
main
display is always visible.

So I'm just curious: is it or would it be possible, to do the same
thing
with css somehow, rather than javascript? (probably not, I'm
guessing).
But maybe.
It is possible, using position: fixed. But the effect is a bit jerky
looking in some browsers.
Apr 30 '07 #2
salmobytes wrote:
My machine generated site displays navigation links (in a table td,
alas, I'll fix that someday)
at screen left, with main display in a td at screen right.

Pages with lots of navigation links force the user to scroll downward
(to see the
links at screen bottom) which sometimes pushes the main display
visually off screen .

I've experimented with javascript, using code that
floats the main display div downward as the page is scrolled, so the
main
display is always visible.

So I'm just curious: is it or would it be possible, to do the same
thing
with css somehow, rather than javascript? (probably not, I'm
guessing).
But maybe.
And what would happen if the "main" section was also greater than the
browser window and you prevented scrolling?

1) find a way to reduce, consolidate, or divide your navigation links in
a more manageable chunk

2) live with the list that you must scroll a mile to reach the last.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Apr 30 '07 #3
salmobytes wrote:
>
I've experimented with javascript, using code that
floats the main display div downward as the page is scrolled, so the
main
display is always visible.

You have to ask yourself if it's absolutely necessary to have the main
display always visible. In 99.999% of cases it's not. Besides, people
know how to scroll and they know how to find the main display. Don't
treat them like idiots.
Apr 30 '07 #4
On Apr 30, 10:17 am, "Jonathan N. Little" <lws4...@centralva.net>
wrote:

Two responses have now said "don't bother to ask or try,
what you want to do is not a good idea anyway."

That may well be true (what I proposed probably is a bad idea) but it
still doesn't answer
the original question, which I'm now just curious about, for
curiosity's
sake:

I know I can float a main display div with javascript, so it follows
the scrollbar. Is that or would that somehow be possible, with
pure css? .....good idea or otherwise....

Apr 30 '07 #5
Rob
salmobytes schreef:
On Apr 30, 10:17 am, "Jonathan N. Little" <lws4...@centralva.net>
wrote:
[snipped]
... but it
still doesn't answer
the original question, which I'm now just curious about, for
curiosity's
sake:

I know I can float a main display div with javascript, so it follows
the scrollbar. Is that or would that somehow be possible, with
pure css? .....good idea or otherwise....
The first answer you got was from Ben C,
who suggested you use 'position: fixed',
that's CSS.

Rob
Apr 30 '07 #6
On Apr 30, 12:50 pm, Rob <robwaaijenb...@hotmail.comwrote:
The first answer you got was from Ben C,
who suggested you use 'position: fixed',
that's CSS.
oops. I missed that. Ok thank you.
I'll shut up now.

Apr 30 '07 #7
In article
<11*********************@y80g2000hsf.googlegroups. com>,
salmobytes <Sa***************@gmail.comwrote:
On Apr 30, 12:50 pm, Rob <robwaaijenb...@hotmail.comwrote:
The first answer you got was from Ben C,
who suggested you use 'position: fixed',
that's CSS.

oops. I missed that. Ok thank you.
I'll shut up now.
In case you did not quite understand it, it is the nav on the
left that you "fix". And, btw, as JL implied, your idea of js or
css to make the content float down has the downside that if it
itself gets to be bigger as you update it, you will have a
problem of folk being unable to see the contents unless they buy
a very tall screen.

--
dorayme
Apr 30 '07 #8
Rob wrote:
salmobytes schreef:
>On Apr 30, 10:17 am, "Jonathan N. Little" <lws4...@centralva.net>
wrote:
[snipped]
>... but it
still doesn't answer
the original question, which I'm now just curious about, for
curiosity's
sake:

I know I can float a main display div with javascript, so it follows
the scrollbar. Is that or would that somehow be possible, with
pure css? .....good idea or otherwise....

The first answer you got was from Ben C,
who suggested you use 'position: fixed',
that's CSS.
Suit yourself!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>A Bad Idea</title>

<style type="text/css">
DIV { border: 1px solid red; width: 20em; position: fixed; }
</style>

</head>
<body>
<h1>A Bad Idea</h1>
<p>Try to reach paragraph 1000 in a real web (not MSIE) browser!</p>
<div>
<script type="text/javascript">
var buf='';
for( i=1; i<1001; i++){
buf+='<p>Sample Paragraph ' + i + '</p>';
}
document.write(buf);
</script>
</div>
</body>
</html>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Apr 30 '07 #9
salmobytes wrote:
On Apr 30, 10:17 am, "Jonathan N. Little" <lws4...@centralva.net>
wrote:

Two responses have now said "don't bother to ask or try,
what you want to do is not a good idea anyway."
Try this morsel.
http://limpid.nl/lab/css/fixed/header-and-footer

Apr 30 '07 #10
On Apr 30, 5:33 pm, zzpat <zzpatr...@gmail.comwrote:
Try this morsel.http://limpid.nl/lab/css/fixed/header-and-footer
Thank you.
That works beautifully in Firefox on linux and IE7 on wintel
what ever it is I have, pre-vista.
I'll try Safari tomorrow.

I see from Googling around this "fixed" positioning will not
work in IE6, which still has something like 38% market share.
I don't have IE6 installed anywhere, so I can't test.

Is it correct to assume it would mean (if I tried to 'fix' a short
display next
to a taller, left-side navigation DIV, that it wouldn't break anything
in IE6........that the shorter, right-side display DIV would simply
dissappear
off screen as the user scrolled down to the bottom of the taller
left-side navigation DIV?

May 2 '07 #11

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
2218
by: Olly | last post by:
I am using the following pure css layout with a header and footer: http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtml The left column floats to the left of the main content (middle...
18
5690
by: day | last post by:
I know I've seen this issue described before, but I can't find it, or the solution now that I need it. I have some css-specified floating divs that contain images or text. The text divs have a...
6
10908
by: veerleverbr | last post by:
Hi, I have the following html: <div id="content"> <div id="leftpart">...</div> <div id="rightpart">...</div> </div> leftpart en rightpart are in the css set to float left. The content of...
12
2792
by: meltedown | last post by:
I would like the floating divs to float and then the header to come after them , on the left. That's what I thought clearing the floats was for, but in this example, the header is to the right of...
1
1951
by: StevePBurgess | last post by:
I have a website which, on the main page, has two floating divs. One contains a list of navigation menu items and the other is themain content of the page. Occasionally that div that contains...
2
3965
by: Arnost Sobota | last post by:
Hello, Suppose I want to play with DIVs as if they were type characters. I have a series of fixed-height (width is of no importance) blocks which must follow one another from left to right, with...
3
4245
by: kent | last post by:
Hi, For the code below, only "aaa" has a red background but "bbb" and "ccc" don't have it: <div style="background: red">aaa <div style="float:left">bbb</div> <div...
2
2924
by: Gary | last post by:
I am new at this, css, and am having trouble doing what I want to do. I want div columns on the left and right that have a background image. Then I want a div in the center, of fixed width, with...
11
5387
by: yawnmoth | last post by:
How do you get both of these div's to have a 100% width? (1): <div style="float: left; background: black; color: white">Hello, world! </div> <div style="clear: both; background: blue; color:...
4
32574
dlite922
by: dlite922 | last post by:
This is just barely above my head when it comes to css. I have a div that needs to contain rows of floating divs, but I need each row not to wrap on to the next one and continue to go right. The...
0
7027
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
6899
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
7019
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
6847
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
5312
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
2980
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
2970
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
555
muto222
php
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
166
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.